<template>
	<!-- <view class=""> -->
	<view class="good-list-box flex-j-sb-fc">
		<view class="top-search-box flex-j-sb-ac">
			<view class="top-search-left-box flex-js-ac">
				<u-icon name="search" size="32"></u-icon>
				<u-input class="top-input" v-model="value" :type="type" :border="border" />
			</view>
			<view class="top-search-right-box flex-j-sb-ac">
				<u-icon size="30" name="../../../static/icon/goodIcon/good-px1.png"></u-icon>
				<u-icon @click="show = true" size="30" name="../../../static/icon/goodIcon/good-px2.png"></u-icon>
			</view>
		</view>
		<!-- 		<u-dropdown>
			<u-dropdown-item v-model="value1" title="距离" :options="options1"></u-dropdown-item>
		</u-dropdown> -->
		<view class="content-scroll-box">
			<scroll-view scroll-y="true" style="height: 100%;">
				<view>
					<good-list @toGoodDetail="toGoodDetail"></good-list>
				</view>
			</scroll-view>
		</view>
		<u-popup mode="bottom" v-model="show" height="60%" :closeable="true">
			<view class="popup-content flex-j-sb-as-fc">
				<view class="popup-top-title-box flex-js-ac">
					<text class="text-24-4d4d4d">筛选</text>
				</view>
				<scroll-view scroll-y="true" class="popup-scroll-box">
					<view>
						<text class="text-28-0f0f0f-b mg-lr-25">分类</text>
						<view class="mg-lr-25 fl-box">
							<view class="fl-item-box flex-jc-ac" v-for="(flItem,index) in 10" :key="index">
								<text>女装</text>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="confrim-btn flex-j-sb-ac">
					<u-button class="popup-left-buttom" :ripple="true">重置</u-button>
					<u-button class="popup-left-buttom" @click="show = false;">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
	<!-- </view> -->

</template>

<script>
	import goodList from "../../../components/goods/good-list/good-list.vue"
	export default {
		components: {
			goodList
		},
		data() {
			return {
				navgatBarTitle:"",
				value: '',
				type: 'text',
				border: false,
				value1: 1,
				show: false,
				options1: [{
						label: '默认排序',
						value: 1,
					},
					{
						label: '距离优先',
						value: 2,
					},
					{
						label: '价格优先',
						value: 3,
					}
				],
			}
		},
		onLoad(e) {
			this.navgatBarTitle = e.name;
		},
		onShow() {
			uni.setNavigationBarTitle({
				title:this.navgatBarTitle
			})
		},
		methods: {
			toGoodDetail(e) {
				uni.navigateTo({
					url: "/pages/home/good-detail/good-detail?id=" + e
				})
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}

	.good-list-box {
		height: 100%;

	}

	.top-search-box {
		height: 100rpx;
		background-color: #FFFFFF;
	}

	.content-scroll-box {
		flex: 1;
		overflow: hidden;
	}

	.top-search-left-box {
		height: 64rpx;
		background-color: #F5F4F2;
		border-radius: 32rpx;
		flex: 1;
		margin-left: 25rpx;
	}

	.top-search-left-box>:nth-child(1) {
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.top-search-right-box {
		margin-right: 25rpx;
	}

	.top-search-right-box>:nth-child(1) {
		margin-right: 25rpx;
		margin-left: 25rpx;
	}

	.top-search-right-box>:nth-child(2) {
		/* width: 80%; */
		/* color: red; */
	}

	.popup-box {
		height: 60%;
		width: 100%;
		background-color: #FFFFFF;
	}
	.popup-left-buttom{
		width: 340rpx;
	}
	.confrim-btn{
		margin-bottom: 20rpx;
		margin-top: 10rpx;
		width: 100%;
	}
	.confrim-btn >:nth-child(2){
		background-color: #F5CC4B;
	}
	.popup-top-title-box{
		height: 110rpx;
	}
	.popup-top-title-box >:nth-child(1){
		margin-left: 38rpx;
	}
	.popup-content{
		height: 100%;
	}
	.popup-scroll-box{
		flex: 1;
		overflow: hidden;
	}
	.fl-box{
		display: flex;
		flex-wrap: wrap;
	}
	.fl-item-box{
		width: 98rpx;
		height: 42rpx;
		border: 1rpx solid #D2D2D2;
		border-radius: 21rpx;
		margin-top: 25rpx;
		margin-right: 25rpx;
	}
</style>
